<template>
	<view class="start">
		<view class="status-bar"></view>
		<view class="logo flex-column">
			<image src="../../static/logo.jpg" class="img1" style="width: 76px; height: 76px;" mode=""></image>
			<image src="../../static/logotext.png" style="width: 132px; height: 38px;margin-top: 20px;" mode=""></image>
		</view>
		<view class="footer">
			<view class="position-absolute flex-column" :style="{'top':' 50%', 'transform': 'translateY(-20%)', 'margin-left': '-10px', 'z-index': '1020', 'left': `${progress}%`}">
				<image src="../../static/run.png" class="run" mode=""></image>
				<text style="margin-top: 4px;font-size: 12px;">{{progress}}%</text>
			</view>
			<view class="position-absolute changeW normal" :style="{'width': `${progress}%`}"></view>
		</view>
		<image class="copyright" src="../../static/copyright.png" mode="" style="width: 184px;"></image>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
const progress = ref(0)
function startProgress() {
  let interval = setInterval(() => {
	if (progress.value >= 100) {
	  clearInterval(interval);
	  uni.switchTab({
	  		url:'/pages/home/home'
		})
	} else {
	  progress.value += 10; // 每次增加 1% 的进度
	}
  }, 500); // 控制速度，50ms 更新一次
}
onMounted(()=>{
	startProgress();
})
</script>

<style scoped>
	.start {
	    color: #222;
	    height: 100vh;
	    padding: 0 20px;
	    background-size: cover;
	}
	.start .status-bar {
	    background-color: plum;
	    width: 100%;
	    height: 0;
	}
	.start .logo .img1 {
	    margin-top: calc(159px + 0px);
	}
	.start .footer {
	    width: 287px;
	    height: 7px;
	    background-color: #fff;
	    border-radius: 4px;
	    margin-left: calc((100% - 287px - 40px)/2);
	    position: fixed;
	    bottom: 117px;
	}
	.position-absolute{
		position: absolute;
	}
	.run {
	    width: 19px;
	    height: 19px;
	}
	.start .normal {
	    background: linear-gradient(270deg,#1a7acb,#38b2e7);
	}
	.start .changeW {
	    width: 0px;
	    height: 7px;
	    border-radius: 4px;
	}
	.copyright {
	    position: fixed;
	    left: 50%;
	    -webkit-transform: translateX(-50%);
	    transform: translateX(-50%);
	    height: 32px;
	    bottom: 50px;
	}
</style>